```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SSL安全协议全面解析 | 网络安全指南</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
            line-height: 1.6;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
        }
        .code-block {
            background: #1e293b;
            color: #e2e8f0;
            border-radius: 0.5rem;
            font-family: 'Courier New', monospace;
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .section-divider {
            height: 1px;
            background: linear-gradient(90deg, rgba(30, 58, 138, 0.1) 0%, rgba(59, 130, 246, 0.5) 50%, rgba(30, 58, 138, 0.1) 100%);
        }
        .highlight-text {
            position: relative;
            z-index: 1;
        }
        .highlight-text:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 30%;
            background-color: rgba(59, 130, 246, 0.2);
            z-index: -1;
            transform: scaleX(0);
            transition: transform 0.3s ease;
            transform-origin: left;
        }
        .highlight-text:hover:after {
            transform: scaleX(1);
        }
    </style>
</head>
<body class="antialiased">
    <!-- Hero Section -->
    <div class="hero-gradient text-white py-24 px-6">
        <div class="max-w-4xl mx-auto text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-6 font-serif">SSL安全协议全面解析</h1>
            <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto opacity-90">
                构建网络安全的第一道防线：深入理解SSL/TLS协议的工作原理与实现
            </p>
            <div class="flex justify-center space-x-4">
                <div class="bg-white bg-opacity-20 px-4 py-2 rounded-full flex items-center">
                    <i class="fas fa-lock mr-2"></i>
                    <span>网络安全</span>
                </div>
                <div class="bg-white bg-opacity-20 px-4 py-2 rounded-full flex items-center">
                    <i class="fas fa-shield-alt mr-2"></i>
                    <span>数据加密</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="max-w-5xl mx-auto px-6 py-12">
        <!-- SSL简介 -->
        <section class="mb-16">
            <div class="flex items-center mb-8">
                <div class="w-2 h-10 bg-blue-600 mr-4"></div>
                <h2 class="text-3xl font-bold font-serif">SSL简介</h2>
            </div>
            
            <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8">
                <div class="p-6 md:p-8">
                    <p class="text-lg leading-relaxed mb-6">
                        <span class="font-semibold text-blue-600">SSL (Security Socket Layer)</span> 是一个安全协议，为基于<span class="highlight-text">TCP (Transmission Control Protocol)</span>的应用层协议提供安全连接。SSL介于TCP/IP协议栈第四层和第七层之间，主要提供<span class="font-semibold">私密性</span>、<span class="font-semibold">完整性</span>和<span class="font-semibold">身份验证</span>服务。
                    </p>
                    <p class="text-lg leading-relaxed mb-6">
                        最常见的应用场景就是SSL为<span class="highlight-text">HTTP (Hypertext Transfer Protocol)</span>协议提供安全连接。SSL协议是一种在两个机器之间提供安全通道的协议，它具有保护数据传输以及识别通信机器的功能。
                    </p>
                    <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <i class="fas fa-info-circle text-blue-500 text-xl"></i>
                            </div>
                            <div class="ml-3">
                                <p class="text-blue-700">
                                    随着SSL协议的不断完善，包括微软IE在内的愈来愈多浏览器支持SSL协议。到目前为止，SSL协议有三个版本，其中SSL2.0和SSL3.0得到广泛的应用，IETF基于SSL3.0推出了TLS1.0协议（也被称为SSL3.1）。
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 px-6 py-4 flex justify-center">
                    <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1652354993181-512df113-01f6-46e0-9dfc-78e56286e715.png" alt="SSL协议位置示意图" class="rounded-lg shadow-sm max-w-full">
                </div>
            </div>
        </section>

        <!-- SSL协议结构 -->
        <section class="mb-16">
            <div class="flex items-center mb-8">
                <div class="w-2 h-10 bg-blue-600 mr-4"></div>
                <h2 class="text-3xl font-bold font-serif">SSL协议结构</h2>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8 mb-8">
                <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-4 text-blue-600">协议分层架构</h3>
                        <p class="mb-4">SSL协议分为两层：</p>
                        <ul class="space-y-3">
                            <li class="flex items-start">
                                <div class="flex-shrink-0 h-6 w-6 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3">
                                    <i class="fas fa-layer-group text-sm"></i>
                                </div>
                                <span><span class="font-semibold">下层为SSL记录协议</span>：主要作用是为高层协议提供基本的安全服务，负责对上层的数据进行分块、压缩、计算并添加MAC（消息验证码）、加密，最后把记录块传输给对方。</span>
                            </li>
                            <li class="flex items-start">
                                <div class="flex-shrink-0 h-6 w-6 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3">
                                    <i class="fas fa-code-branch text-sm"></i>
                                </div>
                                <span><span class="font-semibold">上层协议</span>：包括SSL握手协议、SSL密码变化协议和SSL报警协议</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-4 text-blue-600">上层协议详解</h3>
                        <div class="space-y-4">
                            <div class="p-4 bg-blue-50 rounded-lg">
                                <h4 class="font-medium text-blue-700 mb-2">SSL握手协议</h4>
                                <p class="text-sm">被封装在SSL记录协议中，该协议允许服务器与客户端在应用程序传输和接收数据之前互相认证、协商加密算法和密钥。在初次建立SSL连接时，服务器与客户机交换一系列消息。</p>
                            </div>
                            <div class="p-4 bg-blue-50 rounded-lg">
                                <h4 class="font-medium text-blue-700 mb-2">SSL修改密文协议</h4>
                                <p class="text-sm">保障SSL传输过程中的安全性，客户端和服务器双方应该每隔一段时间改变加密规范</p>
                            </div>
                            <div class="p-4 bg-blue-50 rounded-lg">
                                <h4 class="font-medium text-blue-700 mb-2">SSL报警协议</h4>
                                <p class="text-sm">用来为对等体传递SSL的相关警告。如果在通信过程中某一方发现任何异常，就需要给对方发送一条警示消息通告。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                <div class="bg-gray-50 px-6 py-4 flex justify-center">
                    <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1652355017392-ae08444d-9a1c-47da-8f10-e41c771f1fc9.png" alt="SSL协议结构图" class="rounded-lg shadow-sm max-w-full">
                </div>
            </div>
        </section>

        <!-- SSL安全证书 -->
        <section class="mb-16">
            <div class="flex items-center mb-8">
                <div class="w-2 h-10 bg-blue-600 mr-4"></div>
                <h2 class="text-3xl font-bold font-serif">SSL安全证书</h2>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8 mb-8">
                <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="bg-blue-100 p-2 rounded-lg mr-4">
                                <i class="fas fa-key text-blue-600 text-xl"></i>
                            </div>
                            <h3 class="text-xl font-semibold">使用JDK自带工具生成</h3>
                        </div>
                        <p class="mb-4">JDK生成证书的方式足够简单，但在Chrome和Edge浏览器上依旧显示不安全。</p>
                    </div>
                </div>
                <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="bg-blue-100 p-2 rounded-lg mr-4">
                                <i class="fas fa-cloud text-blue-600 text-xl"></i>
                            </div>
                            <h3 class="text-xl font-semibold">阿里云申请</h3>
                        </div>
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1652355408285-19c46cbb-f3d9-49d1-8b29-8c9d607275e9.png" alt="阿里云SSL证书申请" class="rounded">
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- JDK生成SSL安全证书 -->
        <section class="mb-16">
            <div class="flex items-center mb-8">
                <div class="w-2 h-10 bg-blue-600 mr-4"></div>
                <h2 class="text-3xl font-bold font-serif">JDK生成SSL安全证书</h2>
            </div>
            
            <div class="space-y-8">
                <!-- 步骤1 -->
                <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="bg-blue-600 text-white rounded-full h-8 w-8 flex items-center justify-center mr-4">
                                1
                            </div>
                            <h3 class="text-xl font-semibold">生成证书</h3>
                        </div>
                        <div class="code-block p-4 rounded-lg mb-4 overflow-x-auto">
                            <pre class="text-sm"><code>//  keytool -genkey -alias (别名) -dname "CN=(姓名),OU=(组织单位名称),O=(组织名称),L=(城市名称),ST=(省),C=(国家)" -storetype (密钥仓库类型) -keyalg (生证书的算法名称) -keysize (密钥长度,证书大小) -keystore (指定生成证书的位置和证书名称) -validity (证书有效期，天单位)
 
keytool -genkey -alias toString -dname "CN=ts,OU=java,O=java,L=sz,ST=gd,C=CN" -storetype JKS -keyalg RSA -keysize 2048 -keystore keystore.p12 -validity 365</code></pre>
                        </div>
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1652355752405-e857d9f9-7ad7-4ffe-b21f-8fd73af4c6f8.png" alt="生成证书示例" class="rounded">
                        </div>
                    </div>
                </div>
                
                <!-- 步骤2 -->
                <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="bg-blue-600 text-white rounded-full h-8 w-8 flex items-center justify-center mr-4">
                                2
                            </div>
                            <h3 class="text-xl font-semibold">配置证书</h3>
                        </div>
                        <p class="mb-4">把名为 <span class="font-mono bg-blue-100 px-2 py-1 rounded">keystore.p12</span> 的证书，将其放入resources目录中，并在 <span class="font-mono bg-blue-100 px-2 py-1 rounded">application.properties</span> 或 <span class="font-mono bg-blue-100 px-2 py-1 rounded">application.yml</span> 中配置。</p>
                        <div class="code-block p-4 rounded-lg mb-4 overflow-x-auto">
                            <pre class="text-sm"><code>server.port=8001
#证书的路径.
server.ssl.key-store: classpath:keystore.p12
#证书密码，请修改为您自己证书的密码.
server.ssl.key-store-password: 123456
#秘钥库类型
server.ssl.keyStoreType: JKS
#证书别名
server.ssl.keyAlias: toString</code></pre>
                        </div>
                    </div>
                </div>
                
                <!-- 步骤3 -->
                <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="bg-blue-600 text-white rounded-full h-8 w-8 flex items-center justify-center mr-4">
                                3
                            </div>
                            <h3 class="text-xl font-semibold">配置将HTTP端口重定向HTTPS端口</h3>
                        </div>
                        <div class="code-block p-4 rounded-lg mb-4 overflow-x-auto">
                            <pre class="text-sm"><code>@Configuration
public class SSLConfig {

    // 配置如果访问http://localhost:80就重定向到https://localhost:8001
    @Bean
    public Connector connector() {
        Connector connector = new Connector("org.apache.coyote.http11.Http11NioProtocol");
        connector.setScheme("http");
        connector.setSecure(false);
        connector.setPort(80);
        connector.setRedirectPort(8001);
        return connector;
    }

    @Bean
    public TomcatServletWebServerFactory tomcatServletWebServerFactory(Connector connector) {
        TomcatServletWebServerFactory webServerFactory = new TomcatServletWebServerFactory() {
            @Override
            protected void postProcessContext(Context context) {
                SecurityConstraint securityConstraint = new SecurityConstraint();
                securityConstraint.setUserConstraint("CONFIDENTIAL");
                SecurityCollection securityCollection = new SecurityCollection();
                securityCollection.addPattern("/*");
                securityConstraint.addCollection(securityCollection);
                context.addConstraint(securityConstraint);
            }
        };
        webServerFactory.addAdditionalTomcatConnectors(connector);
        return webServerFactory;
    }
}</code></pre>
                        </div>
                    </div>
                </div>
                
                <!-- 步骤4-5 -->
                <div class="grid md:grid-cols-2 gap-8">
                    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                        <div class="p-6">
                            <div class="flex items-center mb-4">
                                <div class="bg-blue-600 text-white rounded-full h-8 w-8 flex items-center justify-center mr-4">
                                    4
                                </div>
                                <h3 class="text-xl font-semibold">启动项目</h3>
                            </div>
                            <div class="bg-gray-50 p-4 rounded-lg">
                                <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1652356076579-3a7112da-2e6e-44fe-9ce2-3aaca4da2b52.png" alt="启动项目示例" class="rounded">
                            </div>
                        </div>
                    </div>
                    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                        <div class="p-6">
                            <div class="flex items-center mb-4">
                                <div class="bg-blue-600 text-white rounded-full h-8 w-8 flex items-center justify-center mr-4">
                                    5
                                </div>
                                <h3 class="text-xl font-semibold">访问</h3>
                            </div>
                            <div class="space-y-4">
                                <div class="bg-gray-50 p-4 rounded-lg">
                                    <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1652356131891-5ebf3ad1-4a06-4168-928a-cff6c01bc197.png" alt="访问示例1" class="rounded mb-2">
                                </div>
                                <p class="text-sm">点击高级--》继续前往就可以正常访问了。</p>
                                <div class="bg-gray-50 p-4 rounded-lg">
                                    <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1652356162090-2ca25927-5002-4d1d-a599-c81011a2e649.png" alt="访问示例2" class="rounded">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 额外说明 -->
                <div class="bg-blue-50 border-l-4 border-blue-500 p-6 rounded-lg">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-question-circle text-blue-500 text-xl"></i>
                        </div>
                        <div class="ml-3">
                            <h4 class="text-lg font-semibold text-blue-700 mb-2">已经配置8001端口了为什么还要配置80</h4>
                            <p class="text-blue-700">
                                因为8001是HTTPS访问的端口，80是HTTP的端口。因为HTTP本身不安全，如果不设置的情况下用户是没办法访问HTTP 80，配置后用户访问HTTP80就可以自动转到HTTPS 8001了。
                            </p>
                            <div class="mt-4">
                                <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1652356582993-359b4b05-c170-4d1b-ab9e-cbf5a694bf3f.png" alt="端口说明" class="rounded max-w-full">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- HTTP与HTTPS抓包数据对比 -->
        <section class="mb-16">
            <div class="flex items-center mb-8">
                <div class="w-2 h-10 bg-blue-600 mr-4"></div>
                <h2 class="text-3xl font-bold font-serif">HTTP与HTTPS抓包数据对比</h2>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8 mb-8">
                <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                    <div class="p-6">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-xl font-semibold text-green-600">HTTPS抓包数据</h3>
                            <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">安全</span>
                        </div>
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1652359279390-159192fe-abe9-498e-a05e-7b90614c0059.png" alt="HTTPS抓包" class="rounded">
                        </div>
                    </div>
                </div>
                <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                    <div class="p-6">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-xl font-semibold text-red-600">HTTP抓包数据</h3>
                            <span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded">不安全</span>
                        </div>
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1652359335483-3eb890cc-c202-401d-af77-e55be95bf462.png" alt="HTTP抓包" class="rounded">
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 网关配置HTTPS报错 -->
        <section>
            <div class="flex items-center mb-8">
                <div class="w-2 h-10 bg-blue-600 mr-4"></div>
                <h2 class="text-3xl font-bold font-serif">网关配置HTTPS报错</h2>
            </div>
            
            <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                <div class="p-6">
                    <div class="bg-gray-50 p-4 rounded-lg mb-6">
                        <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1676894224832-55d0f8a8-7b90-4e41-a1f3-0f0b5706a7f3.png" alt="网关配置错误" class="rounded">
                    </div>
                    <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded mb-6">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <i class="fas fa-exclamation-triangle text-yellow-500"></i>
                            </div>
                            <div class="ml-3">
                                <p class="text-yellow-700">
                                    <span class="font-medium">解决方法:</span> 把 <span class="font-mono bg-yellow-100 px-1 rounded">key-alias: scg</span> 这行删除或注释掉即可
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="code-block p-4 rounded-lg overflow-x-auto">
                        <pre class="text-sm"><code>server:
  port: 7003
  ssl:
    key-store: classpath:keystore.p12
    key-password: 123123
    key-store-type: JKS
    # key-alias: toString</code></pre>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true
            }
        });
    </script>
</body>
</html>
```